
//左侧饼图
var pieData=[
	{name:'教育',value:46527},
	{name:'金融',value:136362},
	{name:'新闻',value:9894},
	{name:'政府',value:9285},
	{name:'卫生',value:27557}
]
var legend=['教育','金融','新闻','政府','卫生']

var pie3Opt={
    color : ["#fce24f","#b8ff2e","#09e24b","#09e2cb","#09a7e2", "#0841b6", "#68059c","#9c058c","#9c0550"],
    tooltip : {
        trigger: 'item',
        //formatter: "{a} <br/>{b} : {c} ({d}%)"
        formatter:function(param){
            if(param.name){
            	return  '<div>'+param.name+'</div>' +
		        '<div>'+param.value+'  ('+param.percent+'%)</div>'
            }
		}
    },
    legend: {
    	show:false,
        left: 'center',
        bottom: 'bottom',
        data:legend,
        textStyle :{
            color: '#fff'
        }
    },
    series : [
        {
            name: '',
            type: 'pie',
            radius : ['45%','65%'],
            center: ['50%', '50%'],
           // selectedMode: 'single',
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                }
            },
            data: pieData,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['50%', '45%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                label: {
                    normal: {
                        formatter: '\n教育',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 16
                        }
                    }
                }
            }]
        }

    ]
}
var pie3Chart = echarts.init(document.getElementById('keyPie'))
pie3Chart.setOption(pie3Opt)
window.addEventListener("resize", function () {
    pie3Chart.resize();
});
//下拉框选择
$(".typeChange").change(function(){
    var n = $(this).val();
    for (var i = 0;i <5;i++){
        if (n != pieData[i].name){
            pie3Opt.series[0].data[i]['selected'] = false;
        }else{
            pie3Opt.series[0].data[i]['selected'] = true;
        }
    }
    pie3Opt.series[1].data[0].label.normal.formatter = "\n" +n
    pie3Chart.setOption(pie3Opt);
    
    //重点业务网站访问量TOP10
    ranklistLeftData(n);
    //各省重点业务网站数量排名
    barEvtData(n);
    //全国重点业务网站数量分布
    chinaEvtData(n);
    //重点业务网站数量变化趋势
    linEvtData(n);
    
    $("#top_strong").empty();
    var num = '0';
    if(n == '教育'){
    	num = '46,527';
    }else if(n == '金融'){
    	num = '136,362';
    }else if(n == '新闻'){
    	num = '9,894';
    }else if(n == '政府'){
    	num = '9,285';
    }else if(n == '卫生'){
    	num = '27,557';
    }
    $("#top_strong").html(num);
});

function ranklistLeftData(n){
	var ranklistLeft = $('#ranklistLeft');
	ranklistLeft.empty();
	var str = "<table border='' cellspacing='' cellpadding='' class='tab_content'>";
	var datas = null;
	if(n == '教育'){
    	datas = [
    		['育儿网',43664344998],
    		['智慧树幼教',23251146763],
    		['步步高教育',8747773041],
    		['学校安全教育平台',5431823330],
    		['作业帮',3231645939],
    		['宝宝巴士',2474529472],
    		['公务员考试网',2247411818],
    		['贝聊',1620452749],
    		['驾驶员试题网',1540984442],
    		['乐教乐学',1272154484]
    	];
    }else if(n == '金融'){
    	datas = [
    		['东方财富网',21197204014],
    		['第一财经',7300235509],
    		['和讯网',5407333626],
    		['百道网',3642894151],
    		['大智慧金融科技',2437257892],
    		['中国平安',1028426017],
    		['壹钱包',957379510],
    		['拍拍贷',896851447],
    		['1234TV财经直播',781592031],
    		['人人贷',623731686]
    	];
    }else if(n == '新闻'){
    	datas = [
    		['头条网',5.39917E+11],
    		['东方网',56541393378],
    		['ZAKER',13896230734],
    		['环球网',11799147560],
    		['喜马拉雅FM',10606464275],
    		['凤凰网',8560864834],
    		['中华网',7852056786],
    		['山南网',6791862842],
    		['中方新闻',7186944460],
    		['人民网',4139541156]
    	];
    }else if(n == '政府'){
    	datas = [
    		['中国政府网',3093909012],
    		['湘潭人民政府',2131021232],
    		['共产党员网',1062693440],
    		['钟山信息网',576612594],
    		['紫光阁',447250516],
    		['宾阳政务网',421053196],
    		['深圳市国家税务局',274127860],
    		['东莞',240846954],
    		['江门市政务邮箱',235843401],
    		['重庆市人民政府',224389958]
    	];
    }else if(n == '卫生'){
    	datas = [
    		['39健康网',3769942967],
    		['微医',1349301136],
    		['美容微整形',854592955],
    		['南宁市第二人民医院',478798169],
    		['好大夫在线',296843011],
    		['南宁华美医疗美容门诊部',293792912],
    		['99健康网',290228466],
    		['南宁市第八人民医院',254264278],
    		['济南新视界眼科医院',218760530],
    		['潍坊华美医疗美容医院',216279166]
    	];
    }
	for(var i = 0 ; i < datas.length ; i++){
		str +="<tr>"+
    	"<td>"+(i+1)+"</td>"+
    	"<td>"+datas[i][0]+"</td>"+
    	"<td>"+datas[i][1]+"</td>"+
    	"<td><div class='down'></div></td>"+
    	"</tr>"
	}
	str +="</table>";
	ranklistLeft.append(str);
}

function barEvtData(n){
	var yData = null;
	var xData = null;
	if(n == '教育'){
		yData =['广东','北京','四川','山东','福建','天津','江苏','重庆','湖北','上海'];
		xData =[10327,8769,7976,7842,4430,3731,3593,3264,2846,2764];
    }else if(n == '金融'){
    	yData =['福建','广东','北京','四川','山东','天津','上海','重庆','江苏','湖北'];
		xData =[34517,25237,21950,19090,18255,10159,9332,7845,7672,7146];
    }else if(n == '新闻'){
    	yData =['北京','广东','山东','福建','重庆','江苏','四川','天津','湖北','湖南'];
		xData =[2796,2390,1826,1553,1174,1170,1129,1114,968,942];
    }else if(n == '政府'){
    	yData =['山东','广东','北京','福建','江苏','湖南','重庆','广西','湖北','天津'];
		xData =[3249,3107,2599,2366,2238,2104,1921,1685,1213,1163];
    }else if(n == '卫生'){
    	yData =['广东','四川','北京','山东','天津','福建','重庆','江苏','湖北','云南'];
		xData =[5193,4570,4282,3762,2722,2427,2256,1833,1633,1522];
    }
	barEvt(yData,xData,"keyBar");
}
//左侧柱图
var yData=['广东','北京','四川','山东','福建','天津','江苏','重庆','湖北','上海']
var xData=[10327,8769,7976,7842,4430,3731,3593,3264,2846,2764]
barEvt(yData,xData,"keyBar")
function barEvt(yData,xData,ele){
    var max=0
    for (var i=0;i<xData.length;i++){
        if (xData[i] > max) {
            max = xData[i]+200;
        }
    }
    var allData=[max, max, max, max, max, max, max, max]
    var barOption = {
        animation: false,
        tooltip: {
            trigger: 'axis',
            formatter: '{a}<br />{b} : {c}',
            axisPointer: {
                type: 'shadow',
            },
            backgroundColor: 'rgba(9,89,124,0.8)',
            borderWidth: 1,
            borderColor: 'rgba(6,214,224,0.5)',
            textStyle: {
                color: '#4ff2f4'
            }
        },
        grid: {
            left:40,
            top: 15,
            right:10
        },
        xAxis: {
            type: 'category',
            splitLine:{    //grid区域分隔线
                show:false,
                lineStyle: {
                    width:1,
                    type:"solid",
                    color:"#2a3f7e"
                }
            },
            axisLabel: {  //坐标轴标签
                show: true,
                textStyle: {
                    color: '#c0d4da'
                }
            },
            axisTick: {
                show: true   //刻度线
            },
            axisLine:{
                show: true,   //坐标轴轴线
                lineStyle: {
                    width:1,
                    color:"#c0d4da"
                }
            },
            data: yData
        },
        yAxis : {
            splitLine:{    //grid区域分隔线
                show:true,
                lineStyle: {
                    width:1,
                    type:"solid",
                    color:"#2a3f7e"
                }
            },
            axisTick: {
                show: true   //刻度线
            },
            axisLine: {
                show: true ,  //坐标轴轴线
                lineStyle: {
                    width:1,
                    color:"#c0d4da"
                }
            },
            axisLabel: {  //坐标轴标签
                show: true,
                color:"#c0d4da"
            },
        },
        series: [/*{
            name: '外侧',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
                normal: {
                    color: '#1d3fa1',
                    // borderWidth: 1,
                    barBorderRadius:35,
                    //   borderColor: '#0ea4e3'
                }
            },
            data: allData
        },*/ {
            name: '网站数量',
            type: 'bar',
            barGap: '-100%',
            barCategoryGap:'70%',
            data: xData,
            itemStyle: {
                normal: {
                    color: '#0ea4e3',
//                  barBorderRadius:35,
                }
            },
        }]
    };
    var barChart = echarts.init(document.getElementById(ele))
    barChart.setOption(barOption);
    window.addEventListener("resize", function () {
        barChart.resize();
    });
}


//地图
var mapData=[
	{name:'广东',value:10327},
	{name:'北京',value:8769},
	{name:'四川',value:7976},
	{name:'山东',value:7842},
	{name:'福建',value:4430},
	{name:'天津',value:3731},
	{name:'江苏',value:3593},
	{name:'重庆',value:3264},
	{name:'湖北',value:2846},
	{name:'上海',value:2764},
	{name:'云南',value:2220},
	{name:'湖南',value:2129},
	{name:'陕西',value:1935},
	{name:'安徽',value:1492},
	{name:'广西',value:1439},
	{name:'浙江',value:1326},
	{name:'河北',value:1282},
	{name:'河南',value:907},
	{name:'江西',value:553},
	{name:'辽宁',value:418},
	{name:'新疆',value:377},
	{name:'黑龙江',value:327},
	{name:'甘肃',value:313},
	{name:'吉林',value:280},
	{name:'海南',value:134},
	{name:'贵州',value:132},
	{name:'山西',value:106},
	{name:'宁夏',value:32},
	{name:'青海',value:15},
	{name:'内蒙古',value:14},
	{name:'西藏',value:8},
    {name: '台湾',value: 0 },
    {name: '香港',value: 0 },
    {name: '澳门',value: 0 }
]

function chinaEvtData(n){
	var datas = null;
	var max = 0;
	if(n == '教育'){
		max = 10327;
		datas =[
			{name:'广东',value:10327},
			{name:'北京',value:8769},
			{name:'四川',value:7976},
			{name:'山东',value:7842},
			{name:'福建',value:4430},
			{name:'天津',value:3731},
			{name:'江苏',value:3593},
			{name:'重庆',value:3264},
			{name:'湖北',value:2846},
			{name:'上海',value:2764},
			{name:'云南',value:2220},
			{name:'湖南',value:2129},
			{name:'陕西',value:1935},
			{name:'安徽',value:1492},
			{name:'广西',value:1439},
			{name:'浙江',value:1326},
			{name:'河北',value:1282},
			{name:'河南',value:907},
			{name:'江西',value:553},
			{name:'辽宁',value:418},
			{name:'新疆',value:377},
			{name:'黑龙江',value:327},
			{name:'甘肃',value:313},
			{name:'吉林',value:280},
			{name:'海南',value:134},
			{name:'贵州',value:132},
			{name:'山西',value:106},
			{name:'宁夏',value:32},
			{name:'青海',value:15},
			{name:'内蒙古',value:14},
			{name:'西藏',value:8},
		    {name: '台湾',value: 0 },
		    {name: '香港',value: 0 },
		    {name: '澳门',value: 0 }
		 ];
	}else if(n == '金融'){
		max = 34517;
		datas =[
			{name:'福建',value:34517},
			{name:'广东',value:25237},
			{name:'北京',value:21950},
			{name:'四川',value:19090},
			{name:'山东',value:18255},
			{name:'天津',value:10159},
			{name:'上海',value:9332},
			{name:'重庆',value:7845},
			{name:'江苏',value:7672},
			{name:'湖北',value:7146},
			{name:'云南',value:6688},
			{name:'湖南',value:5654},
			{name:'安徽',value:4347},
			{name:'河北',value:4119},
			{name:'广西',value:3908},
			{name:'陕西',value:3607},
			{name:'浙江',value:3450},
			{name:'河南',value:1847},
			{name:'江西',value:1462},
			{name:'辽宁',value:1137},
			{name:'新疆',value:1101},
			{name:'黑龙江',value:909},
			{name:'吉林',value:902},
			{name:'甘肃',value:891},
			{name:'山西',value:381},
			{name:'贵州',value:375},
			{name:'海南',value:356},
			{name:'宁夏',value:154},
			{name:'西藏',value:68},
			{name:'内蒙古',value:62},
			{name:'青海',value:45},
		    {name: '台湾',value: 0 },
		    {name: '香港',value: 0 },
		    {name: '澳门',value: 0 }
		 ];
    }else if(n == '新闻'){
    	max = 2796;
    	datas =[
    		{name:'北京',value:2796},
    		{name:'广东',value:2390},
    		{name:'山东',value:1826},
    		{name:'福建',value:1553},
    		{name:'重庆',value:1174},
    		{name:'江苏',value:1170},
    		{name:'四川',value:1129},
    		{name:'天津',value:1114},
    		{name:'湖北',value:968},
    		{name:'湖南',value:942},
    		{name:'云南',value:839},
    		{name:'广西',value:800},
    		{name:'上海',value:580},
    		{name:'陕西',value:548},
    		{name:'新疆',value:472},
    		{name:'浙江',value:374},
    		{name:'河北',value:347},
    		{name:'安徽',value:290},
    		{name:'河南',value:236},
    		{name:'甘肃',value:179},
    		{name:'江西',value:160},
    		{name:'贵州',value:120},
    		{name:'海南',value:95},
    		{name:'吉林',value:90},
    		{name:'辽宁',value:73},
    		{name:'黑龙江',value:57},
    		{name:'山西',value:38},
    		{name:'宁夏',value:31},
    		{name:'青海',value:15},
    		{name:'内蒙古',value:11},
    		{name:'西藏',value:3},
		    {name: '台湾',value: 0 },
		    {name: '香港',value: 0 },
		    {name: '澳门',value: 0 }
		 ];
    }else if(n == '政府'){
    	max = 3249;
    	datas =[
    		{name:'山东',value:3249},
    		{name:'广东',value:3107},
    		{name:'北京',value:2599},
    		{name:'福建',value:2366},
    		{name:'江苏',value:2238},
    		{name:'湖南',value:2104},
    		{name:'重庆',value:1921},
    		{name:'广西',value:1685},
    		{name:'湖北',value:1213},
    		{name:'天津',value:1163},
    		{name:'四川',value:1150},
    		{name:'上海',value:798},
    		{name:'云南',value:691},
    		{name:'陕西',value:600},
    		{name:'新疆',value:537},
    		{name:'安徽',value:423},
    		{name:'河北',value:389},
    		{name:'甘肃',value:301},
    		{name:'浙江',value:274},
    		{name:'江西',value:247},
    		{name:'河南',value:227},
    		{name:'吉林',value:216},
    		{name:'海南',value:201},
    		{name:'黑龙江',value:177},
    		{name:'贵州',value:155},
    		{name:'宁夏',value:129},
    		{name:'辽宁',value:95},
    		{name:'山西',value:81},
    		{name:'内蒙古',value:53},
    		{name:'青海',value:36},
    		{name:'西藏',value:34},
		    {name: '台湾',value: 0 },
		    {name: '香港',value: 0 },
		    {name: '澳门',value: 0 }
		 ];
    }else if(n == '卫生'){
    	max = 5193;
    	datas =[
    		{name:'广东',value:5193},
    		{name:'四川',value:4570},
    		{name:'北京',value:4282},
    		{name:'山东',value:3762},
    		{name:'天津',value:2722},
    		{name:'福建',value:2427},
    		{name:'重庆',value:2256},
    		{name:'江苏',value:1833},
    		{name:'湖北',value:1633},
    		{name:'云南',value:1522},
    		{name:'上海',value:1479},
    		{name:'浙江',value:1327},
    		{name:'陕西',value:997},
    		{name:'湖南',value:965},
    		{name:'广西',value:878},
    		{name:'安徽',value:692},
    		{name:'河北',value:611},
    		{name:'河南',value:569},
    		{name:'江西',value:299},
    		{name:'辽宁',value:233},
    		{name:'黑龙江',value:184},
    		{name:'甘肃',value:133},
    		{name:'吉林',value:124},
    		{name:'新疆',value:98},
    		{name:'山西',value:86},
    		{name:'贵州',value:63},
    		{name:'海南',value:55},
    		{name:'宁夏',value:25},
    		{name:'内蒙古',value:7},
    		{name:'青海',value:7},
		    {name: '台湾',value: 0 },
		    {name: '香港',value: 0 },
		    {name: '澳门',value: 0 }
		 ];
    }
	chinaEvt(datas,max,"keyChina");
}

chinaEvt(mapData,10327,"keyChina")
function chinaEvt(mapData,max,ele){
    var optionMap = {
        tooltip: {
            trigger: 'item',
            formatter:function(param){
//			console.log(param)
                return '<div>网站数：'+param.value+'</div>'
            }
        },
        visualMap: {
            seriesIndex: 0,
            min: 0,
            max: max,
            itemHeight:'70',
            left: '10%',
            bottom: '10%',
            inRange: {
                //color: ['#42a5e1','#076ba6']
            //	color: ['#0ef0e6','#076ba6']
        color: ['#3AE9F2','#FFBA3F']
            },
//      text: ['高','低'],           // 文本，默认为数值文本
            calculable: true,
            textStyle:{
                color:'#fff'
            }
//  hoverLink: false
        },
        series: [{
            top:'8%',
            zoom: 1.2,
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    show:false,
                    borderColor: '#134b99',
                    borderWidth: 1,
                    areaColor: '#388ec7'
                },
                emphasis: {
                    areaColor: '#fce24f',
                    borderColor: '#fce24f'
                }
            },
            data:mapData
        }]
    };
    var mapChart = echarts.init(document.getElementById(ele))
    mapChart.setOption(optionMap)
    window.addEventListener("resize", function () {
        mapChart.resize();
    });
}

//右下折线图
var timeData= ['2017-12','2018-01','2018-02']
var data1=[46897,47998,46527]
var data2=[162, 166, 183, 165, 118, 172, 192, 90, 175, 106, 128, 109]

function linEvtData(n){
	var datas = null;
	if(n == '教育'){
    	datas = [46897,47998,46527];
    }else if(n == '金融'){
    	datas = [137472,138867,136362];
    }else if(n == '新闻'){
    	datas = [10034,9793,9894];
    }else if(n == '政府'){
    	datas = [9408,27762,27557];
    }else if(n == '卫生'){
    	datas = [27025,27762,27557];
    }
	linEvt(timeData,datas,n,"keyLine")
}

linEvt(timeData,data1,"教育","keyLine")
function linEvt(timeData,data1,name,ele){
    var lineOption = {
        tooltip : {
            trigger: 'axis',
        },
        /*legend: {
            textStyle:{
                color: 'rgba(255,255,255,0.8)'
            },
            data:["金融","卫生","政府","教育","新闻"]
        },*/
        grid: {
            top:30,
            left: '3%',
            right: '8%',
            bottom: 10,
            containLabel: true
        },
        xAxis: {
            boundaryGap : false,
            type: 'category',
            splitLine:{    //grid区域分隔线
                show:false,
                lineStyle: {
                    width:1,
                    type:"solid",
                    color:"#2a3f7e"
                }
            },
            axisLabel: {  //坐标轴标签
                show: true,
                textStyle: {
                    color: '#0d7790'
                }
            },
            axisTick: {
                show: false   //刻度线
            },
            axisLine:{
                show: false,   //坐标轴轴线
                lineStyle: {
                    width:1,
                    color:"#fff"
                }
            },
            data : timeData
        },
        yAxis : {
            splitLine:{    //grid区域分隔线
                show:true,
                lineStyle: {
                    width:1,
                    type:"solid",
                    color:"#2a3f7e"
                }
            },
            axisTick: {
                show: false   //刻度线
            },
            axisLine: {
                show: false ,  //坐标轴轴线
                lineStyle: {
                    width:1,
                    color:"#fff"
                }
            },
            axisLabel: {  //坐标轴标签
                show: true
            },
        },
        series : [
            {
                name:name,
                type:'line',
                symbol:'none',  //这句就是去掉点的
                smooth:true,  //这句就是让曲线变平滑的
                stack: '总量',
                itemStyle: { normal: {
                    color:'#09a7e2',
                }},
                lineStyle: { normal: {
                    color:'#09a7e2',
                }},
                areaStyle: {
                    normal: {
                        color:'#09a7e2',
                        opacity: 0.2
                    }
                },
                data:data1
            }
        ]
    };
    var lineChart = echarts.init(document.getElementById(ele))
    lineChart.setOption(lineOption);
    window.addEventListener("resize", function () {
        lineChart.resize();
    });
}






